<template>
  <div class="home">
    <van-nav-bar :title="store.getters.deptName?store.getters.deptName:'设备管理'"></van-nav-bar>
    <div
      style="padding: 0 10px; display: flex;flex-direction: column;align-items: center; justify-content: center;gap: 20px;">
      <div class="scan-button-wrapper" style="display: flex;gap: 20px;">
        <div class="saoDiv" @click="handleSao">
          <img src="../assets/ma.png" />
          <span style="color: #fff;">扫描设备</span>
        </div>
        <div class="saoDiv" @click="handleShou">
          <img src="../assets/shou.png" style="width: 50px;" />
          <span style="color: #fff;">手动录入</span>
        </div>
      </div>
      <div style="width: 100%;display: flex;gap: 10px;">
           
             <div class="cardDiv" style="flex:1;display: flex;flex-direction: column;align-items: center; ">
                <span style="font-size: 16px; font-weight: bold;">设备总数</span>
                <span style="font-size: 20px; font-weight: bold;color: #2563EB;">{{ tongji.num }}</span>
             </div>
             <div class="cardDiv" style="flex:1;display: flex;flex-direction: column;align-items: center;">
                <span style="font-size: 16px; font-weight: bold;">已盘查数</span>
                <span style="font-size: 20px; font-weight: bold;color: #2563EB;">{{ tongji.check }}</span>
             </div>
          
      </div>
      <div class="cardDiv">
        <h2>盘查记录</h2>
        <div>
          <div style="display: flex;justify-content: space-between;padding:15px 10px ;align-items:center;"
            @click="handleCheck()">
            <div style="display: flex;gap: 20px;align-items: center;">
              <img src="../assets/img/sj.png" style="width: 40px;" />
              <span style="font-weight: bold;font-size: 18px;">
                记录列表
              </span>
            </div>

          </div>
        </div>
      </div>
      
      <div class="cardDiv">
        <h2>设备管理&nbsp(当月数据)</h2>
        <div class="cardDgrid">
          <div v-for="(item, index) in typeList" :key="index"
            style="display: flex;flex-direction: column;gap: 4px;justify-content: center;align-items: center;padding: 5px;overflow: hidden;"
            @click="handleList(item.name)">
            <img style="width: 30px;height: 30px;" src="../assets/img/icon1.png" />
            <span style="width: 100%; font-weight: bold;font-size: 16px;" class="ellipsis">{{ item.name }}</span>
            <span style="color: #3B82F6;">{{ item.count }}个设备</span>
            <span style="color: #3B82F6;">已盘查{{ item.check }}个</span>
          </div>
        </div>
      </div>

    </div>
    <van-tabbar v-model="active">
    <van-tabbar-item icon="home-o" @click="goToPage('main')">首页</van-tabbar-item>
    <van-tabbar-item icon="setting-o" @click="goToPage('settings')">我的</van-tabbar-item>
  </van-tabbar>
  </div>
 

</template>

<script setup>

import EquipmentEditApi from "../modules/equipmentEdit/api/equipmentEdit.js"
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router";
import icon1 from "../assets/img/icon1.png"
import icon2 from "../assets/img/icon2.png"
import icon3 from "../assets/img/icon3.png"
import icon4 from "../assets/img/icon4.png"
import icon5 from "../assets/img/icon5.png"
import icon6 from "../assets/img/icon6.png"
import store from "../store/index.js";

const typeList = ref([])
const tongji=ref({
    num:0,
    check:0
})
let imgs = [
  {
    url: icon1,
    title: "显示器",
    number: 10
  },
  {
    url: icon2,
    title: "电脑主机",
    number: 10
  },
  {
    url: icon3,
    title: "键盘",
    number: 10
  },
  {
    url: icon4,
    title: "打印机",
    number: 10
  },
  {
    url: icon5,
    title: "无线设备",
    number: 10
  },
  {
    url: icon6,
    title: "SD卡",
    number: 10
  }

]
const router = useRouter();
onMounted(() => {
  EquipmentEditApi.getEquipmenttableAllType().then(res => {

    if (res.data.code == 200) {
      typeList.value = res.data.data
      typeList.value.forEach(item=>{
         tongji.value.num +=item.count
         tongji.value.check +=item.check
      })
    }
  })
  EquipmentEditApi.get
})

const handleCheck = () => {
  router.push("/checkTake");
}

const handleSao = () => {
  router.push("/scanning");
}
const handleShou = () => {
  router.push("/equipmentEdit");
}


const handleList = (name) => {
  router.push({path:"/equipmentList",query:{name}});
}
const active = ref(0);
const goToPage = (name) => {
  switch (name) {
    case "main":
      router.push("/main");
      break;
    case "settings":
      router.push("/settings");
      break;
  }
};
</script>

<style scoped>
.home {
  width: 100vw;
  height: 100vh;
  background: #ebedf0;
  padding-bottom: 60px;
  overflow-y: auto;
}

.saoDiv {
  width: 120px;
  height: 120px;
  border-radius: 10px;
  margin-top: 20px;
  border-radius: 10px;
  background: linear-gradient(to bottom right, #1890ff, #096dd9);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;

}

.cardDiv {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  background: #fff;
}

.cardDiv h2 {
  font-weight: bold;
  text-align: left;
}

.saoDiv img {
  width: 70px;
  height: 50px;
}

.saoDiv span {
  font-size: 18px;
  font-weight: bold
}

.cardDgrid {
  width: 100%;
  display: grid;
  place-items: center;
  grid-template-columns: repeat(3, 1fr);
  /* 三列，每列等宽 */
  gap: 20px;
  /* 行与列之间的间隔 */
}

.cardDgrid div {
  width: 100%;
  padding: 0 20px;
  background: #f9f9f9;
}

.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}

.carousel {
  width: 100%;
  height: 180px;
}

.appArea {
  text-align: left;
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.circle {
  background: #5b7aff;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  margin: 15px 0px 5px;
  line-height: 36px;
  color: white;
}

.listItem {
  font-size: 14px;
  /* margin-left: 5px;
  width: 20%; */
}

.item {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  text-align: center;
}

.appArea:nth-last-child(2) {
  padding-bottom: 70px;
}

.title {
  font-weight: bold;
  font-size: 16px;
}

.scan-button-wrapper {
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0px);
  }
}
.ellipsis {
  width: 100%;          /* 必须设置固定宽度或最大宽度 */
  overflow: hidden;      /* 隐藏溢出内容 */
  white-space: nowrap;   /* 强制文本不换行 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
}
</style>
